<!DOCTYPE HTML>
<!DOCTYPE html PUBLIC "">
<HTML lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>学生选课系统</title>
        <!--网站引用Vue文件 -->
	<script src="js/selectcourse/vue.min.js"></script>
	<script src="js/selectcourse/vue-resource.min.js"></script>

    <script type="text/javascript" src="js/selectcourse/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/selectcourse/bootstrap.min.css" />
    <script type="text/javascript" src="js/selectcourse/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/selectcourse/zftal-ui.css" />
	<link href="css/selectcourse/selectcourse.css" rel="stylesheet" type="text/css">
</head>
<BODY id="selectcourse_content">
<header class="navbar-inverse top2">
	<div class="container" id="navbar_container">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
					<span class="sr-only">学生选课</span>
				</button>
				<A class="navbar-brand" id="topbutton" href="">学生选课</A>
			</div>
		</div>
	</div>
</header>
<!--头部 结束 -->
<div id="bodyContainer" style="margin: 0px; padding: 0px; width: 100%;">
	<div class="container container-func sl_all_bg" id="yhgnPage">
		<div class="panel panel-info">
			<div class="panel-heading">&nbsp;</div>
			<!--在下面开始写布局部分-->
            <!--第一部分：查询-->
			<form role="form" name="form1">
				<div class="form-group">
					<div class="input-group" style="position: relative; top: 8px;margin: 0px 15px;">
						<input type="text" class="form-control" placeholder="请输入课程名进行查询" style="" required v-model="input_search" >
						<span class="input-group-btn">
                    <button class="btn btn-default" type="button" @click="search()" style="">查询</button>
                </span>
					</div>
				</div>
			</form>

			<!--第二部分-->
			<table id="selectcourse_selector">
				<tr>
					<th><label>学院:</label></th>
					<td>
						<label>
							所有
							<input type="radio" name="college" value="" checked v-model="input_college" @click="getdata(-1)">
						</label>
						<label class="section" th:each="college : ${colleges}">
							[[${college.collegeName}]]
							<input type="radio" name="college"  th:value="${college.collegeName}" v-model="input_college" @click="getdata(-1)"/>
						</label>
					</td>
				</tr>
				<tr>
					<th><label>剩余量:</label></th>
					<td>
						<label>
							所有
							<input type="radio" name="capacity" value="" v-model="input_capacity" checked @click="getdata(-1)">
						</label>
						<label>
							有
							<input type="radio" name="capacity" value="0" v-model="input_capacity"  @click="getdata(-1)">
						</label>
						<label>
							无
							<input type="radio" name="capacity" value="2" v-model="input_capacity"  @click="getdata(-1)">
						</label>
					</td>
				</tr>
			</table>
			<!--第四部分-->
			<div class="container" style="width: -webkit-fill-available;">
				<div class="row clearfix">
					<div class="col-md-12 column">
						<div class="tabbable" id="tabs-217540">
							<ul class="nav nav-tabs">
								<li class="active">
									 <a href="#panel-first" data-toggle="tab"  @click="getdata(0)">公共必修</a>
								</li>
								<li>
									 <a href="#panel-second" data-toggle="tab"  @click="getdata(1)">专业选修</a>
								</li>
								<li>
									 <a href="#panel-third" data-toggle="tab"  @click="getdata(2)">通识</a>
								</li>
							</ul>
							<div class="tab-content">
							<!-- 1公共选修 -->
								<div class="tab-pane active" id="panel-first">
									<!-- 如果存在记录 -->
									<div class="panel-group"  id="panel-1">
										<div v-if="course_selected_place.length + course_not_selected_place.length == 0" style="width: 200px;margin: auto;">
											没有可用的选课记录
										</div>
										<div class="panel panel-default" v-for= "msg in msgs[0]" v-if="msg.courseType == 0" v-cloak>
											<div class="panel-heading" v-bind:style="getstyle(msg.cno,msg.capacity,1)">

												 <a class="panel-title" data-toggle="collapse" data-parent="#panel-1" v-bind:href="'#panel-element-'+msg.cno">{{msg.cno}}-{{msg.cname}}(教课老师:{{msg.tname}})-{{msg.college}} </a>
											</div>
											<div v-bind:id="'panel-element-'+msg.cno" class="panel-collapse collapse">
												<div class="panel-body">
													<div>{{msg.description}}</div>
													<div style="font-weight: bold;">上课时间:{{msg.startWeek}} ~ {{msg.endWeek}}周，每周星期{{msg.week}} {{msg.startStep}} ~ {{msg.endStep}}节</div>
													<div style="font-weight: bold;">上课地点:{{msg.address}}</div>
													<div style="font-weight: bold;">剩余容量:{{msg.capacity}}</div>
													<div style="text-align: right;">
													<button type="button" v-bind:class="'btn btn-default btn-primary '+canbeselect(msg.cno,msg.capacity,1)" @click="select_course(msg.cno,msg.capacity,1)">选课</button>
														<button type="button" v-bind:class="'btn btn-default btn-danger '+ canbeselect(msg.cno,msg.capacity,2)" @click="cancel_course(msg.cno,msg.capacity,2)">退选</button></div>

												</div>
											</div>
										</div>
									</div>
								</div>						
							<!-- 2专业选修 -->
								<div class="tab-pane" id="panel-second">
									<div class="tab-pane active" id="panel-second">
										<!-- 如果存在记录 -->
										<div class="panel-group"  id="panel-2">

											<div v-if="course_selected_place.length + course_not_selected_place.length == 0" style="width: 200px;margin: auto;">
												没有可用的选课记录
											</div>
											<div class="panel panel-default" v-for= "msg in msgs[0]" v-if="msg.courseType == 1" v-cloak>
												<div class="panel-heading" v-bind:style="getstyle(msg.cno,msg.capacity,1)">

													 <a class="panel-title" data-toggle="collapse" data-parent="#panel-2" v-bind:href="'#panel-element-'+msg.cno">{{msg.cno}}-{{msg.cname}}(教课老师:{{msg.tname}})-{{msg.college}} </a>
												</div>
												<div v-bind:id="'panel-element-'+msg.cno" class="panel-collapse collapse">
													<div class="panel-body">
														<div>{{msg.description}}</div>
														<div style="font-weight: bold;">上课时间:{{msg.startWeek}} ~ {{msg.endWeek}}周，每周星期{{msg.week}} {{msg.startStep}} ~ {{msg.endStep}}节</div>
														<div style="font-weight: bold;">上课地点:{{msg.address}}</div>
														<div style="font-weight: bold;">剩余容量:{{msg.capacity}}</div>
														<div style="text-align: right;">
														<button type="button" v-bind:class="'btn btn-default btn-primary '+canbeselect(msg.cno,msg.capacity,1)" @click="select_course(msg.cno,msg.capacity,1)">选课</button>
														<button type="button" v-bind:class="'btn btn-default btn-danger '+ canbeselect(msg.cno,msg.capacity,2)" @click="cancel_course(msg.cno,msg.capacity,2)">退选</button></div>

													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							<!-- 3通识课 -->
								<div class="tab-pane" id="panel-third">
									<div class="tab-pane active" id="panel-third">
									<!-- 如果存在记录 -->
										<div class="panel-group"  id="panel-3">
											<div v-if="course_selected_place.length + course_not_selected_place.length == 0" style="width: 200px;margin: auto;">
												没有可用的选课记录
											</div>
											<div class="panel panel-default" v-for= "msg in msgs[0]" v-if="msg.courseType == 2" v-cloak>
												<div class="panel-heading" v-bind:style="getstyle(msg.cno,msg.capacity,1)">

													 <a class="panel-title" data-toggle="collapse" data-parent="#panel-3" v-bind:href="'#panel-element-'+msg.cno">{{msg.cno}}-{{msg.cname}}(教课老师:{{msg.tname}})-{{msg.college}} </a>
												</div>
												<div v-bind:id="'panel-element-'+msg.cno" class="panel-collapse collapse">
													<div class="panel-body">
														<div>{{msg.description}}</div>
														<div style="font-weight: bold;">上课时间:{{msg.startWeek}} ~ {{msg.endWeek}}周，每周星期{{msg.week}} {{msg.startStep}} ~ {{msg.endStep}}节</div>
														<div style="font-weight: bold;">上课地点:{{msg.address}}</div>
														<div style="font-weight: bold;">剩余容量:{{msg.capacity}}</div>
														<div style="text-align: right;">

														<button type="button" v-bind:class="'btn btn-default btn-primary '+canbeselect(msg.cno,msg.capacity,1)" @click="select_course(msg.cno,msg.capacity,1)">选课</button>
														<button type="button" v-bind:class="'btn btn-default btn-danger '+ canbeselect(msg.cno,msg.capacity,2)" @click="cancel_course(msg.cno,msg.capacity,2)">退选</button></div>
														</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		
			<!-- 右侧内容开始 -->
		<div class="outer" id="left-content">
			<div class="outer_left" id="outer_left_button">
				<A class="glyphicon glyphicon-arrow-left btn-lg" href=""></A>
				<A class="outer_left_xkxx" href="javascript:;">
					<H5>选课信息</H5>
					<span>已选 <B id="yxkts" style="margin-bottom: 6px;">{{allcourse_selected_place.length}}</B></span>
				</A>
			</div>
			<div class="outer_right" id="wrapper">
				<div class="right_div" id="right_div" style="margin-top: 10px;">
					<div class="outer_xkxx_list">
						<div class="page-header">
						    <h1>
						        <small>已选课程</small>
						    </h1>
						</div>
					</div>
				</div>
				<!-- 键入已选课程区域 -->
				<ul class="list-group">
					<div v-if="allcourse_selected_place.length==0" style="text-align: center;">无选课信息</div>
					<li class="list-group-item" v-for="place in allcourse_selected_place">
						<div>
							{{msgs[0][place].cno}}-{{msgs[0][place].cname}}(教课老师:{{msgs[0][place].tname}})-{{msgs[0][place].college}}
						</div>
						<div style="text-align: right;">
							<button type="button" class="'btn btn-default btn-danger" @click="cancel_course(msgs[0][place].cno)">退选</button>
						</div>
					</li>
				</ul>
				<!--这里写的是已选课的列表-->
			</div>
		</div>
		 <script>
		 window.onload=function(){
			$("#left-content").animate({width:"40px"},1000);
			$("#outer_left_button").click(function() {
				if($("#left-content").css("width")	==	"40px")
				{
					$("#left-content").animate({width:"500px"},600);
					$("#outer_left_button").addClass("glyphicon-arrow-right");
				}
				else
				{
					$("#left-content").animate({width:"40px"},600);
					$("#outer_left_button").removeClass("glyphicon-arrow-right");
				}
			});
		}
		</script>
</div>

<script>
	var vm = new Vue({
		el:"#bodyContainer",
		data:{
			input_search:"",
			msgs:[],
			input_college:"",
			input_capacity:"",
			course_not_selected_place:[],
			course_selected_place:[],
			allcourse_selected_place:[],
			course_type:0
		},
		methods:{
			getdata:function(type){
				console.log("getdata")
				var right_type;
				if(type != -1){
					this.course_type = type;
				}
				right_type = this.course_type
				this.course_selected_place=[]
				this.course_not_selected_place=[]
				this.allcourse_selected_place=[]
				this.$http.post("/filtercourse",{
					college:this.input_college,
					cno:"",
					cname:"",
					tname:"",
					capacity:this.input_capacity
				},
					{emulateJSON:true}).then(function (value) {
	                this.msgs=value.body.data;
					var i,j;
	                for(i=this.msgs[0].length - 1;i >= 0;i--){
	                	//判断课程的类别
		                	for(j = this.msgs[1].length - 1;j >= 0 ;j--){

		                		if(this.msgs[0][i].cno == this.msgs[1][j].cno){
		                			// 添加已选择的课表位置
		                			this.allcourse_selected_place.push(i)
		                			if(right_type == this.msgs[0][i].courseType){
		                				this.course_selected_place.push(i)
		                			}
		                			break;
		                		}
		                	}
		                	if(j == -1 && right_type == this.msgs[0][i].courseType){
		                			//添加未选择课表位置
	                			this.course_not_selected_place.push(i)
	                		}
                		}
	                }
			    ,function (reason) {
	                alert("请求出错");
	            })
				//this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
			},
			getstyle:function(coursenumber,capacity,flag){
				if(this.canbeselect(coursenumber,capacity,flag) == 'disabled'){
					return "background-color: rgb(184, 255, 148);"
				}else{
					return ''
				}
			},
			search:function(){
				right_type = this.course_type
				this.course_selected_place=[]
				this.course_not_selected_place=[]
				this.allcourse_selected_place=[]
				this.$http.post("/filtercourse",{
					college:this.input_college,
					cno:"",
					cname:this.input_search,
					tname:"",
					capacity:this.input_capacity
				},
					{emulateJSON:true}).then(function (value) {
	                this.msgs=value.body.data;
					var i,j;
	                for(i=this.msgs[0].length - 1;i >= 0;i--){
	                	//判断课程的类别
		                	for(j = this.msgs[1].length - 1;j >= 0 ;j--){

		                		if(this.msgs[0][i].cno == this.msgs[1][j].cno){
		                			// 添加已选择的课表位置
		                			this.allcourse_selected_place.push(i)
		                			if(right_type == this.msgs[0][i].courseType){
		                				this.course_selected_place.push(i)
		                			}
		                			break;
		                		}
		                	}
		                	if(j == -1 && right_type == this.msgs[0][i].courseType){
		                			//添加未选择课表位置
	                			this.course_not_selected_place.push(i)
	                		}
                		}
	                }
			    ,function (reason) {
	                alert("请求出错");
	            })
			},
			canbeselect:function(coursenumber,capacity,flag){
				if(flag == 1){
					//选课选项
					if(capacity != 0){
						for(var temp = 0;temp < this.course_not_selected_place.length;temp++){
							if(coursenumber == this.msgs[0][this.course_not_selected_place[temp]].cno){
								return "";
							}
						}
					}
					return 'disabled';
				}
				else{
					//退选选项
					
					for(var temp = 0;temp < this.course_selected_place.length;temp++){
						if(coursenumber == this.msgs[0][this.course_selected_place[temp]].cno){
							return "";
						}
					}
					
					return 'disabled';
				}
			},
			select_course:function(coursenumber,capacity,flag){
				if(this.canbeselect(coursenumber,capacity,flag) == "disabled"){
					return ;
				}
				this.$http.post("/setcourseselected",{
					cno:coursenumber
				},
				{emulateJSON:true}).then(function(value){
					console.log(value)
					if(value.body.code == 200){
						alert("选课成功");
						this.getdata(-1)
						//console.log(this.course_selected_place);
						//console.log(this.course_not_selected_place);
						//this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
					}
					else{
					    if(value.body.code==507){
					        alert("选课时间冲突！")
						}
						else{
						    alert("选课失败！");
						}
					}
				},function(reason){
					alert("选课失败!请联系管理员！");
				})
				
			},
			cancel_course:function(coursenumber,capacity,flag){
				if(this.canbeselect(coursenumber,capacity,flag) == "disabled"){
					return ;
				}
				this.$http.post("/canclecourse",{
					cno:coursenumber
				},
				{emulateJSON:true}).then(function(value){
					console.log(value)
					if(value.body.code == 200){
						alert("退选成功");
						this.getdata(-1)
						//console.log(this.course_selected_place);
						//console.log(this.course_not_selected_place);
						//this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
					}
					else
						alert("退课失败!")
				},function(reason){
					alert("退课失败!");
				})
				
			}
		},
		mounted:function(){
			this.getdata(0);
		}
	});
</script>
</BODY>

</HTML>
